<template>
	<!-- 表单组件 -->
	<HyCard :title="tableConfig.title" v-if="tableConfig.showSearch">
		<el-tabs type="border-card" @tab-change="handleClickTab">
		<el-tab-pane v-for="(item, index) in tabls.tablesList" :key="index" :label="item.lable" :name="item.name">
			<HyForm ref="hyFormRef" :hyFormDefault="searchDefault" :hyFormConfig="searchConfig" :hyFormFields="searchFields" @clickDropdown="clickDropdown">
			<template #custom>
				<el-col :span="searchButtonConfig.span" :offset="searchButtonConfig.offset">
					<div>
						<el-button icon="Search" type="primary" @click="handleSearch" :loading="state.loading"> 查询 </el-button>
						<el-button icon="RefreshLeft" style="margin-left: 24px" :loading="state.loading" @click="handleRest"> 重置 </el-button>
					</div>
				</el-col>
			</template>
		</HyForm>
		<!--表格-->
		<el-table
				class="mt-5"
				:cell-style="{ textAlign: 'center' }"
				:header-cell-style="{ textAlign: 'center', background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }"
				:data="state.tableData"
				style="width: 100%"
				v-loading="state.loading"
				:row-key="tableConfig.rowKey"
				@selection-change="handleSelectionChange"
				:highlight-current-row="tableConfig.singleSelect"
				@current-change="handleCurrentChange"
				border
			>
				<el-table-column v-if="tableConfig.multiple" type="selection" width="55" sortable />
				<el-table-column type="index" label="序号" width="80" />
				<!-- <el-table-column
					sortable
					v-for="item in tableColumns"
					:prop="item.prop"
					:label="item.label"
					:width="item.width"
					:fixed="item.fixed ? item.fixed : false"
					:key="item.prop"
					show-overflow-tooltip
					:formatter="item.formatter ? (row: any, column: any, )=>item.formatter(row,column) : null"
				>
				</el-table-column> -->
				<template v-for="item in tableColumns">
					<el-table-column
						v-if="!item.slot"
						sortable
						:prop="item.prop"
						:label="item.label"
						:width="item.width"
						:fixed="item.fixed ? item.fixed : false"
						:key="item.prop"
						show-overflow-tooltip
						:formatter="item.formatter ? (row: any, column: any, )=>item.formatter(row,column) : null"
					></el-table-column>
					<el-table-column
						v-else
						sortable
						:prop="item.prop"
						:label="item.label"
						:width="item.width"
						:fixed="item.fixed ? item.fixed : false"
						:key="item.prop + 1"
						show-overflow-tooltip
						:formatter="item.formatter ? (row: any, column: any, )=>item.formatter(row,column) : null"
					>
						<template v-slot="scope">
							<slot :name="item.slot" :row="scope.row" :column="scope.column"></slot>
						</template>
					</el-table-column>
				</template>
				<slot name="operation"> </slot>
			</el-table>
			<div v-if="!tableConfig.hiddenPageInfo" style="text-align: right; width: 100%; margin-top: 20px">
				<el-pagination
					v-model:current-page="state.pageInfo.current"
					:page-size="state.pageInfo.size"
					layout="total, sizes,prev, pager, next,jumper"
					:total="state.total"
					@current-change="currentChange"
					@size-change="sizeChange"
				/>
			</div>
			
		</el-tab-pane>
	</el-tabs>
		

	</HyCard>

	<div class="mt-5"></div>
	<!--带tab的表格-->
	
</template>

<script lang="ts" setup>
import { onMounted, ref, toRefs } from 'vue';
import HyForm from '/@/components/HyForm/index.vue';
import HyCard from '/@/components/HyCard/index.vue';
import type { TabsPaneContext } from 'element-plus';
//父级菜单传来的值
const props = defineProps({
	tabls: {
		type: Object,
		default: () => {
			return {
				tablesList: [
					{
						lable: '开发项目',
						name: 1,
					},
					{
						lable: '运维项目',
						name: 2,
					},
				],
			};
		},
	},
	searchButtonConfig: {
		type: Object,
		default: () => {
			return {
				span: 6,
				offset: 0,
			};
		},
	},
	tableColumns: {
		type: Object,
		default: () => {
			return {};
		},
	},
	tableConfig: {
		default: () => ({
			rowKey: 'id',
			showSearch: false,
			multiple: false,
			singleSelect: false,
			leftButtons: () => {
				return [];
			},
			request: () => {},
			hiddenPageInfo: false,
			defaultData: [],
			requestParames: () => {
				return {};
			},
			title: '',
		}),
		type: Object,
	},

	searchFields: {
		type: Object,
		default: () => {
			return {};
		},
	},
	searchConfig: {
		type: Object,
		default: () => {
			return {
				labelWidth: '120px',
				span: 6,
				offset: 0,
				type: 'search',
			};
		},
	},
	searchDefault: {
		default: () => {
			return {};
		},
		type: Object,
	},
});

const { tableColumns, tableConfig, searchConfig, searchDefault, searchFields } = toRefs(props);
let state = ref<any>({
	pageInfo: {
		current: 1,
		size: 10,
	},
	total: 0,
	loading: false,
	tableData: [],
});
const searchData = ref({});
watch(
	[() => tableConfig.value.defaultData, () => tableConfig.value.requestParames],
	([nv1, nv2]) => {
		if (nv1) state.value.tableData = tableConfig.value.defaultData;
		if (nv2) getTableData();
	},
	{ immediate: true }
);
onMounted(() => {
	getTableData();
});
// 获取分页数据
const getTableData = async () => {
	if (tableConfig.value.request) {
		state.value.loading = true;
		tableConfig.value
			?.request({ ...state.value.pageInfo, ...searchData.value, ...props.tableConfig.requestParames })
			.then((response: any) => {
				console.log(response)
				if (response?.data) {
					state.value.tableData = response.data.records;
					state.value.total = response.data?.total*1;
				}
			})
			.finally(() => {
				state.value.loading = false;
			});
	}
};
//页码改变
const currentChange = (current: number) => {
	state.value.pageInfo.current = current;
	getTableData();
};

// 每页数量
const sizeChange = (size: number) => {
	state.value.pageInfo.size = size;
	getTableData();
};
//列表映射翻译
// const formatter = (value: any, data: any) => {
// 	if (value) {
// 		const item = data.find((item: any) => item.value == value);
// 		return item ? item.lable : '';
// 	}
// 	return value;
// };
const selectOptions = ref<any>([]);

//多选
const handleSelectionChange = (value: any) => {
	selectOptions.value = value;
};
//单选
const handleCurrentChange = (value: any) => {
	selectOptions.value = value;
};
//查询
const hyFormRef = ref();
const handleSearch = () => {
	searchData.value = hyFormRef.value.hyForm;
	getTableData();
};
//重置
const handleRest = () => {
	searchData.value = {};
	hyFormRef.value.resetFields();
	getTableData();
};
//传递tab改变值调用接口
const emit = defineEmits(['handleClick', 'clickDropdown']);
const handleClickTab = (tab: TabsPaneContext) => {
	emit('handleClick', tab);
};
//接收下拉菜单传递的参数区别打开弹窗
const clickDropdown = (value?: any) => {
	emit('clickDropdown', value);
};
// 暴露
defineExpose({ getTableData, selectOptions, state });
</script>

<style lang="scss" scopde></style>
